<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
	<ui:composition template="template/template.xhtml">
		<ui:define  name="page-title" >#{messages.novoPedido}</ui:define >
		<ui:define  name="center">
			<h:outputText styleClass="title" value="#{messages.novoPedido}"/>
        	<p:messages id="messages" autoUpdate="true"/>
           	<h:panelGrid columns="2" id="fields"> 
	
	 			<h:outputLabel value="#{messages.tipo}" for="tipo"/>
	 			<p:selectOneMenu id="tipo" value="#{pedidoController.novoPedido.tipoPedido.id}" required="true">  
	 				<f:selectItem itemLabel="#{messages.seleccione}" itemValue="" /> 
                      	<f:selectItems value="#{pedidoController.tiposPedido}" var="tipo" itemLabel="#{tipo.nome}" itemValue="#{tipo.id}" />  
                  	</p:selectOneMenu>  
	 
				<h:outputLabel for="descricao" value="#{messages.descricao}" /> 
          		<p:inputText id="descricao" value="#{pedidoController.novoPedido.descricao}" required="true"/>
          			
				<h:outputLabel value="#{messages.centro}" for="pedido-centro"/>
	 			<p:selectOneMenu id="pedido-centro" value="#{pedidoController.novoPedido.centro.id}" style="display: inline-block" required="true">  
                   	<f:selectItem itemLabel="#{messages.seleccione}" itemValue="" /> 
                   	<f:selectItems value="#{centroController.centros}" var="centro" itemValue="#{centro.id}" itemLabel="#{centro.nome}" /> 
                   	<p:ajax update="deposito-expedicao, novo-material" event="change" process="@this"/>
               	</p:selectOneMenu> 
                 	
				<h:outputLabel value="#{messages.depositoExpedicao}" for="deposito-expedicao"/>
	 			<p:selectOneMenu id="deposito-expedicao" value="#{pedidoController.novoPedido.depositoExpedicao.id}" style="display: inline-block" required="true">  
                    <f:selectItem itemLabel="#{messages.seleccione}" itemValue="" /> 
                    <f:selectItems value="#{pedidoController.depositosExpedicao}" var="deposito" itemValue="#{deposito.id}" itemLabel="#{deposito.id} - #{deposito.nome}" />  
                </p:selectOneMenu> 
                  	
          		
	 			<h:column/>
    						
			</h:panelGrid>  
			<p:panel>
				<h:panelGrid columns="5" id="novo-material" cellspacing="10"> 
					
					<h:column>
						<h:outputLabel value="#{messages.material}" for="material"/>
			 			<p:selectOneMenu required="true" id="material" value="#{pedidoController.stock.material.id}" style="display: inline-block; vertical-align: middle;" >  
                        	<f:selectItem itemLabel="#{messages.seleccione}" itemValue="" /> 
                        	<f:selectItems value="#{pedidoController.materiais}" var="material" itemValue="#{material.id}" itemLabel="#{material.nome}" />  
                    		<p:ajax update="deposito" event="change" process="@this"/>
                    	</p:selectOneMenu>  
                   	</h:column>
					
					<h:column>
						<h:outputLabel value="#{messages.depositoOrigem}" for="deposito"/>
			 			<p:selectOneMenu required="true" id="deposito" value="#{pedidoController.stock.deposito.id}" style="display: inline-block; vertical-align: middle;" >  
                        	<f:selectItem itemLabel="#{messages.seleccione}" itemValue="" /> 
                        	<f:selectItems value="#{pedidoController.centroStockList}" var="stock" itemValue="#{stock.deposito.id}" itemLabel="#{stock.deposito.id} - #{stock.deposito.nome} - (#{stock.quantidade})" />  
                        	
                    	</p:selectOneMenu> 
                   	</h:column>
				
                   	<h:column>
						<h:outputLabel value="#{messages.quantidade}" for="quantidade"/>
			 			<p:inputText required="true" style="display: inline-block; vertical-align: middle;" id="quantidade" value="#{pedidoController.movimento.quantidade}"/>
                   	</h:column>
                   	
                   	<h:column>
                   		<p:commandLink process="novo-material" action="#{pedidoController.novoMovimento}" styleClass="ui-icon ui-icon-plusthick" update="novo-material, materiais"/>
                   	</h:column>
                   	
				</h:panelGrid>  
				<p:dataTable rowIndexVar="index"  id="materiais" var="pedido" value="#{pedidoController.movimentos}" 
					widgetVar="materiaisTable">  

			        <f:facet name="header">  
			            #{messages.materiais} 
			        </f:facet>  
			  	
			  		<p:column headerText="#{messages.material}" style="width:25%; height: 16px">  
			               <h:outputText value="#{pedido.material.nome}" />
			           </p:column>  
			  
		          	<p:column headerText="#{messages.quantidade}" style="width:25%">  
			            <h:outputText value="#{pedido.quantidade}" />
			        </p:column>
			        
			        <p:column headerText="#{messages.centro}" style="width:25%">  
			             <h:outputText value="#{pedido.deposito.centro.nome}" />
			        </p:column> 
			        
			        <p:column headerText="#{messages.deposito}" style="width:25%">  
			           <h:outputText value="#{pedido.deposito.nome}" />
			        </p:column> 
			        
			        <p:column style="width:20px">  
			            <p:commandLink action="#{pedidoController.removeMaterial(index)}" styleClass="ui-icon ui-icon-closethick" update="materiais" process="@this"/>
			        </p:column> 
			  
			    </p:dataTable>
		    </p:panel>
  			<div>
    			<p:commandButton value="#{messages.voltar}" action="pedidos" immediate="true"  ajax="false"/> 
      			<p:commandButton value="#{messages.guardar}" action="#{pedidoController.saveNewPedidoAction}" process="@this,fields"/> 
	        </div>
		</ui:define >
	</ui:composition>
	
</html>